<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>详情页</title>
  <style>
    ul,
    li {

      list-style: none;
    }

    ul {
      display: flex;
      /* border: 1px solid red; */
      justify-content: space-evenly;
      padding: 10px 0;
    }

    ul li {
      width: 24%;
      border: 1px solid #ccc;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 0;
      cursor: pointer;

    }

    ul li img {
      width: 90%;
    }

    ul li p {
      width: 90%;
      margin: 5px;
    }
  </style>
</head>

<body>
  <ul id="list">
    <!-- <li></li> -->
  </ul>
  <script>
    //1：定义数据
    var goodlist = [{
        id: 111,
        url: 'images/g1.jpg',
        name: '阿联酋美女1号',
        price: 1998,
        age: 20
      },
      {
        id: 22,
        url: 'images/g2.jpg',
        name: '阿联酋美女2号',
        price: 98,
        age: 18
      },
      {
        id: 3325,
        url: 'images/g3.jpg',
        name: '阿联酋美女3号',
        price: 998,
        age: 22
      },
      {
        id: 4,
        url: 'images/g4.jpg',
        name: '阿联酋美女4号',
        price: 9.8,
        age: 24
      },
      {
        id: 5,
        url: 'images/g3.jpg',
        name: '阿联酋美女5号',
        price: 9888,
        age: 18
      }
    ]
    //2：拿到列表页中的参数 然后处理为对象的形式 
    let arr = location.search.substring(1).split("=")
    // console.log(res);
    //3：定义一个对象，来接受这个参数，以对象的形式存储
    let obj = {}
    obj[arr[0]] = arr[1] // obj ={id: "3325"}

    //4：把这个对象根据id渲染数据  就是拿id的属性值 去数据库匹配 拿到所匹配到的id对应的对象
    let res = goodlist.filter(function (items, i) {
      return obj.id == items.id
    })
    // console.log(res); // {0: {id: 3325, url: "images/g3.jpg", name: "阿联酋美女3号", price: 998, age: 22}} ...
    //5：拿到res 来渲染数据
    for (var i = 0; i < res.length; i++) {
      list.innerHTML = `
      <li idx="${res[i].id}">
      <img src="${res[i].url}" alt="">
      <p class="name">姓名：${res[i].name}</p>
      <p class="price">价格：${res[i].price}</p>
      <p class="age">年龄：${res[i].age}</p>
    </li>
      `
    }
  </script>
</body>

</html>